<template>
    <view class="gradeone">
        <view class="search_top_nav" style="height: 150rpx; width: 100%">
            <view :style="{ height: statusBarHeight }" class="status_bar"></view>
            <view class="search_nav_content">
                <view @click="back" style="width: 76rpx; height: 88rpx">
                    <image
                        style="margin-left: 28rpx; height: 36rpx; width: 20rpx; margin-top: 26rpx"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/back1.png"
                    ></image>
                </view>
                <label class="search_title"></label>
            </view>
        </view>

        <!-- #ifndef MP-WEIXIN -->
        <!-- <view style="height:88rpx;width: 100%;"></view> -->
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <!-- <view style="height: 88rpx;width: 100%;"></view> -->
        <!-- #endif -->
        <navigator
            :url="'/packageMine/pages/grade/gradeDetail?id=' + item.id + '&name=' + item.name + '&Numindex=' + index"
            hover-class="none"
            class="gradeone_main"
            v-for="(item, index) in gradeList"
            :key="unique"
        >
            <view class="gradine_bner">
                <view class="gradine_bner_img" v-if="index == 0"
                    ><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/gradebner1.png"></image
                ></view>
                <view class="gradine_bner_img" v-if="index == 1"
                    ><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/gradebner2.png"></image
                ></view>
                <view class="gradine_bner_img" v-if="index == 2"
                    ><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/gradebner3.png"></image
                ></view>
                <view class="gradine_bner_img" v-if="index == 3"
                    ><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/gradebner4.png"></image
                ></view>
                <!-- <view class="gradine_bner_img"><image src="../../../static/img/grade/gradebner1.png"></image></view> -->
                <view class="gradine_bner_main">
                    <text class="gradeName">{{ item.name }}</text>
                    <!-- <slider :value="item.num" @change="sliderChange" step="5" block-size='0'  style="margin: 0;" :show-value="false"/> -->
                    <progress
                        class="gradeSpeed"
                        :percent="item.score / 10"
                        active="true"
                        border-radius="5px"
                        activeColor="#ffffff"
                        backgroundColor="rgba(255,255,255,0.5)"
                    ></progress>
                    <text class="gradeNum">累计积分：{{ item.userScore }}/1000</text>
                </view>
            </view>
        </navigator>

        <u-loadmore
            v-if="more"
            :status="status"
            loadingText="加载中"
            loadmoreText="上拉加载更多"
            nomoreText="已经到底啦～"
            fontSize="28"
            iconSize="30"
            marginTop="20"
            marginBottom="30"
        ></u-loadmore>
    </view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {
    data() {
        return {
            statusBarHeight: statusBarHeight,
            pageNum: 1,
            pageSize: 20,
            isloading: false,
            total: 0,
            gradeList: [],
            status: 'loadmore',
            more: false,
        };
    },
    onLoad() {
        this.getGrade(true);
    },
    onPullDownRefresh() {
        this.getGrade(true);
    },
    onReachBottom() {
        if (this.more == false) return;
        this.status = 'loading';
        this.pageNum = ++this.pageNum;
        this.getGrade(false);
    },
    methods: {
        getGrade(isFresh) {
            if (isFresh) {
                this.pageNum = 1;
                this.pageSize = 20;
            }
            let data = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            this.request.httpTokenRequest('/mp-api/wx/my/grade/list', data, 'POST', false).then((res) => {
                uni.stopPullDownRefresh();
                if (res.code == 0) {
                    if (res.data.list && isFresh) {
                        this.gradeList = res.data.list;
                    } else {
                        res.data.list.forEach((item) => {
                            this.gradeList.push(item);
                        });
                    }
                    if (res.data.total > this.gradeList.length) {
                        this.status = 'loadmore';
                        this.more = true;
                    } else {
                        this.more = false;
                        this.status = 'nomore';
                    }
                } else {
                    this.more = false;
                    this.status = 'nomore';
                }
            });
        },
        back() {
            uni.navigateBack();
        },
    },
};
</script>

<style>
</style>
